<template>
 <div class="props-table">
  <div v-for="(value, key) in finalProps" :key="key" class="prop-item">
    <span class="label" v-if="value.text">{{value.text}}</span>
    <div class="prop-component">
     <component
       :is="value.component" 
      :[value.valueProp]="value.value" 
      v-bind="value.extraProps"
      v-on="value.events"
       >
      <template v-if="value.options">
      <!--如果是像select组件 遍历子组件options -->
       <component
          :is="value.subComponent"
          v-for="(option, k) in value.options" :key="k"
          :value="option.value"
            >
            <!--采用vue中vNode，用自定义组件RenderNnode解决jsx问题  -->
           <render-vnode :vNode="option.text"></render-vnode>
        <!-- {{option.text}} -->
        </component>

      </template>
     </component>
    </div>
   
  </div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed, PropType,VNode } from 'vue'
import {reduce} from 'lodash'
import { mapPropsToForms, PropsToForms} from '../propsMap'
import {TextComponentProps} from '../defaultProps'
import RenderVnode from './RenderVnode'
interface FormProps {
  component: string;
  subComponent?: string; 
  value: string;
  extraProps?: {[key: string]: any};
  options?: {text: string | VNode; value: any}[];
  text?: string;
  valueProp?: string;
  eventName?: string;
  events?: {[key: string]: (e: any) => void}; //在渲染表单的时候，动态添加的
}

export default defineComponent({
  name:"props-table",
  components:{
     
  },
  props:{
     props: {
       type: Object as PropType<TextComponentProps>,
       required: true
     }
  },
  emits:['change'],
  setup(props, context) {
    const finalProps = computed(() => {
      return reduce(props.props,(result, value, key) => {
        const newKey = key as keyof TextComponentProps;
        const item = mapPropsToForms[newKey]
        if(item){
          console.log()
           const { valueProp = 'value', eventName = 'change', initalTransform, afterTransform } = item
          // item.value = initalTransform ? initalTransform(value) : value
          const newItem: FormProps = {
            ...item,
            value: initalTransform ? initalTransform(value) : value,
            valueProp,
            eventName,
            events: {
              [eventName]: (e: any) => { context.emit('change', { key, value: afterTransform? afterTransform(e) : e })}
            }
          }
          // item.valueProp = valueProp ? valueProp : 'value'
          result[newKey] = newItem
        }
        // 将输入的值作为props的属性value的值， 
          /**
           * 即如
           * {
           *   text:{ 
           *      component:'a-inout',
           *       value: 'hello'
           *   }
           * }
           **/
       
        return result 
      }, {} as { [key: string]: FormProps })
    })

    return {
      finalProps
    }
    
  },
})
</script>
<style>
.prop-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.label {
  width: 28%;
}
.prop-component {
  width: 70%;
}
.prop-item.no-text {
  display: inline-block;
  margin: 0 10px 0 0;
}
#item-fontWeight {
  margin-left: 28%;
}
.component-a-select .ant-select {
  width: 150px;
}
.prop-component.component-shadow-picker, .prop-component.component-image-processer, .prop-component.component-background-processer {
  width: 100%;
}
</style>